{% include 'vue.header.j2' %}

<template>
  <a-drawer
    v-model:visible="drawerVisible"
    width="50%"
    placement="right"
    title="{{ table.common.label }}详情"
    :closable="true"
    @close="closeDrawer"
  >
    <a-row justify="space-between" type="flex">
      {%- for field_name, field in columns.items() %}
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="{{ field.common.label }}">
            {%- if field.mark.enum_options %}
            {{ '{{ get' + field.naming.FieldName + 'Text(itemDetail.' + field.naming.field_name + ') }}' }}
            {%- else %}
            {{ '{{ itemDetail.' + field.naming.field_name + ' }}' }}
            {%- endif %}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      {%- endfor %}
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { {{ table.derived.naming.class_name }} } from "./{{ table.derived.naming.class_name }}";

const drawerVisible = ref(false);
const itemDetail = ref<Partial<{{ table.derived.naming.class_name }}>>({});

{%- for field_name, field in columns.items() %}
{%- if field.mark.enum_options %}
const get{{ field.naming.FieldName }}Text = (value: string | undefined): string => {
  if (!value) return '';
  const texts: Record<string, string> = {
    {%- for option in field.mark.enum_options %}
    '{{ option.value }}': '{{ option.label }}',
    {%- endfor %}
  };
  return texts[value] || value;
};
{%- endif %}
{%- endfor %}

function openDrawer(item: {{ table.derived.naming.class_name }}) {
  itemDetail.value = { ...item };
  drawerVisible.value = true;
}

function closeDrawer() {
  drawerVisible.value = false;
  itemDetail.value = {};
}

defineExpose({ openDrawer });
</script>

<style scoped>
.ant-descriptions {
  margin-bottom: 20px;
}
</style>